<template>
    <div class="comp">
        <!-- 图表展示区域 -->
       <div class="chart" ref="huan"></div>
    </div>
</template>

<script>
import mixinData from "../utils/mixin.js"
export default {
    // 混入
    mixins:[mixinData],
    methods:{
        // 1.获取echarts实例  设置基础的静态配置项绘制基础图表
        initEcharts(){
            // 1.1 获取echarts实例
            this.echartsInstance = this.$echarts.init(this.$refs.huan,this.themeName)
            // 1.2 设置基础的静态配置
            let initOptions={
                // 标题
                title:{
                    text:"▍主要地区农作物种植占比",
                    top:"3%",
                    left:"3%"
                },
                // 提示语
                tooltip:{
                    show:true
                }
            }
            // 1.3 绘制基础图表
            this.echartsInstance.setOption(initOptions)
        },
        // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('cropAreasProportion')
            this.allData = data;//console.log(data);
            // 根据数据继续绘制图表
            this.setEcharts()
            // 4.使用适配方法
            this.Adaptive()
        },
        // 3.根据数据继续绘制图表
        setEcharts(){
            // 3.1根据数据生成系列 [{type,center,radius,data},{},{},{}......]
            let count = this.allData.length;
            let seriesData = this.allData.map((item,index)=>{
                // 返回绘制每个饼图的系列对象 {type,center,radius,data}
                return {
                    type:'pie',
                    radius:[60,80],
                    label:{
                        position:"center"
                    },
                    data:[{name:item.areas+'\n'+item.zb+'%',value:item.zb},{value:item.other}],
                    center:[100/(count+1)*(index+1)+'%' ,'60%']
                }
            })
            let setOptions={
                // 系列
                series:seriesData
            }

            // 3.2绘制图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.适配方法
        Adaptive(){
            // 获取一个比例尺
            let width = this.$refs.huan.offsetWidth;
            // 3.5-3.7
            let scale = width/100*3.6

            let seriesData = this.allData.map((item,index)=>{
                // 返回绘制每个饼图的系列对象 {type,center,radius,data}
                return {
                    // 配置文本标签字体
                    label:{
                        fontSize:scale/2
                    },
                    radius:[scale*1.3,scale*1.5] 
                }
            })

            // 根据比例尺动态设置标题、柱子宽度、柱子圆角大小、阴影宽度
            let updateOptions={
                // 标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                },
                // 系列
                series:seriesData
            }

            // 使用动态配置绘图
            this.echartsInstance.setOption(updateOptions)

            // 只是赋值坐标系内部的图表大小适配
            this.echartsInstance.resize();
        }
    },
    mounted(){
        // 1.获取echarts实例 
        this.initEcharts()
        // 2.获取业务数据
        this.getData()
        // 3.监听窗口变化
        window.addEventListener('resize',this.Adaptive)
    },
    destroyed(){
        // 移除窗口监听 防止内存泄露
        window.removeEventListener('resize',this.Adaptive)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
